// Editor Geometry

// Editor margins left and right for all breakpoints in both fullscreen and
// normal mode.
@editor-margin-fullscreen-sm:   50px;
@editor-margin-fullscreen-md:  100px;
@editor-margin-fullscreen-lg:  150px;
@editor-margin-fullscreen-xl:  200px;
@editor-margin-fullscreen-xxl: 350px;

@editor-margin-normal-sm:  20px;
@editor-margin-normal-md:  50px;
@editor-margin-normal-lg: 100px;

#editor {
  position:fixed;
  top:@toolbar-height;
  right:0;
  bottom:0;
  left: 20%;
  overflow-x:hidden;
  overflow-y: auto;
  padding-left: 10px; // Don't include the resize-marker (needed to make the gutters work)

  &.collapsed { left: 40%; }
  &.fullscreen { left: 0%; padding-left: 0px; }

  // JQUERY UI - THEME (necessary for resizable to work)
  .ui-resizable-handle {
    position: absolute;
    font-size: 0.1px;
    display: block; }
    .ui-resizable-disabled .ui-resizable-handle,
    .ui-resizable-autohide .ui-resizable-handle {
      display: none;
    }
    .ui-resizable-w {
      cursor: ew-resize;
      width: 10px;
      left: 0px;
      top: 0;
      height: 100%;
      padding: 2px;

      &::after {
        content: "";
        position: absolute;
        width: 6px;
        height: calc(100% - 4px);
      }
    }

    .CodeMirror {
      height:100%;
      cursor:text;
      font-family: inherit;
      margin-left: 0.5em;

      @media(min-width: 1025px) { margin-left: @editor-margin-normal-lg; }
      @media(max-width: 1024px) { margin-left: @editor-margin-normal-md; }
      @media(max-width:  900px) { margin-left: @editor-margin-normal-sm; }
    }

    .CodeMirror-code {
      margin:5em 0em;
      @media(max-width: 1024px) { margin: @editor-margin-fullscreen-md 0em; }

      .mute { opacity:0.2; }
    }

    .CodeMirror-scroll {
      padding-right: 5em;
      @media(min-width: 1025px) { padding-right: @editor-margin-normal-lg; }
      @media(max-width: 1024px) { padding-right: @editor-margin-normal-md; }
      @media(max-width:  900px) { padding-right: @editor-margin-normal-sm; }
      overflow-x:hidden !important; // Necessary to hide the horizontal scrollbar
    }
  }


  // CodeMirror fullscreen
  .CodeMirror-fullscreen {
    position: fixed !important; // Have to override another relative
    top: @toolbar-height; left: 0; right: 0; bottom: 0;
    height: auto;
    z-index: 500;

    @media(min-width: 1301px) { margin-left: @editor-margin-fullscreen-xxl !important; }
    @media(max-width: 1300px) { margin-left: @editor-margin-fullscreen-xl  !important; }
    @media(max-width: 1100px) { margin-left: @editor-margin-fullscreen-lg  !important; }
    @media(max-width: 1000px) { margin-left: @editor-margin-fullscreen-md  !important; }
    @media(max-width:  800px) { margin-left: @editor-margin-fullscreen-sm  !important; }

    .CodeMirror-scroll {
      @media(min-width: 1301px) { padding-right: @editor-margin-fullscreen-xxl !important; }
      @media(max-width: 1300px) { padding-right: @editor-margin-fullscreen-xl  !important; }
      @media(max-width: 1100px) { padding-right: @editor-margin-fullscreen-lg  !important; }
      @media(max-width: 1000px) { padding-right: @editor-margin-fullscreen-md  !important; }
      @media(max-width:  800px) { padding-right: @editor-margin-fullscreen-sm  !important; }
    }
  }
